import Link from 'umi/link'
import Moment from 'react-moment'
import { TableProps } from 'antd/lib/table'
import { Divider, Dropdown, Icon, Menu, Table as TableT } from 'antd'
import { capitalize } from 'lodash'
import { Order } from '../type'
import Items from './items'

interface Props extends TableProps<Order> {
  data: Order[]
  link: (id: string) => string
  onEdit: (id: string) => void
}

class Table extends TableT<Order> {}

class Column extends Table.Column<Order> {}

export default ({ data, link, onEdit, ...props }: Props) => (
  <Table {...props} rowKey="id" dataSource={data}>
    <Column
      title="Create Time"
      dataIndex="createdAt"
      render={(time, { id }) => (
        <Link to={link(id)}>
          <Moment calendar>{time}</Moment>
        </Link>
      )}
    />
    <Column
      title="Customer"
      dataIndex="customer"
      render={customer => customer.name}
    />
    <Column
      title="Items"
      dataIndex="items"
      render={items => <Items data={items} />}
    />
    <Column title="State" dataIndex="state" render={capitalize} />
    <Column
      title="Update Time"
      dataIndex="updatedAt"
      render={time => <Moment calendar>{time}</Moment>}
    />
    <Column
      title="Action"
      render={(_, { id }) => (
        <div>
          <a onClick={() => onEdit(id)}>Edit</a>
          <Divider type="vertical" />
          <Dropdown
            trigger={['click']}
            overlay={
              <Menu>
                <Menu.Item />
              </Menu>
            }
          >
            <a className="ant-dropdown-link">
              More <Icon type="down" />
            </a>
          </Dropdown>
        </div>
      )}
    />
  </Table>
)
